
<template>
  <div>
    <div id="a1234">
      <el-carousel :interval="4000" arrow="always" height="500px">
        <el-carousel-item v-for="item in 4" :key="item">

        </el-carousel-item>
      </el-carousel>
    </div>
    <div id="style" >
      <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position=res :stretch='true'>
        <el-tab-pane label="别墅" name="first">
          <el-row>
            <el-col :span="7" v-for="(o, index) in list1" :key="index" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src='o.src' class="image">
                <div style="padding: 14px ;  text-align: center;">
                  <span>{{'别墅'+(index+1)}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="洋房" name="second">
          <el-row>
            <el-col :span="7" v-for="(o, index) in list2" :key="index" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src='o.src' class="image">
                <div style="padding: 14px ;  text-align: center;">
                  <span>{{'洋房'+(index+1)}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="写字楼" name="third">
          <el-row>
            <el-col :span="7" v-for="(o, index) in list3" :key="index" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src='o.src' class="image">
                <div style="padding: 14px ;  text-align: center;">
                  <span>{{'写字楼'+(index+1)}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公寓" name="fourth">
          <el-row>
            <el-col :span="7" v-for="(o, index) in list4" :key="index" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src='o.src' class="image">
                <div style="padding: 14px ;  text-align: center;">
                  <span>{{'公寓'+(index+1)}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="商铺" name="fiex">
          <el-row>
            <el-col :span="7" v-for="(o, index) in list5" :key="index" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src='o.src' class="image">
                <div style="padding: 14px ;  text-align: center;">
                  <span>{{'商铺'+(index+1)}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="高层住宅" name="six">
          <el-row>
            <el-col :span="7" v-for="(o, index) in list6" :key="index" :offset="index > 0 ? 1 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src='o.src' class="image">
                <div style="padding: 14px ;  text-align: center;">
                  <span>{{'高层住宅'+(index+1)}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      res: 'top',
      list1: [{
        src: require('../../assets/images/bieshu1.jpg')
      },
      {
        src: require('../../assets/images/bieshu2.jpeg')
      },
      {
        src: require('../../assets/images/bieshu3.jpeg')
      },
      ],
      list2: [{
        src: require('../../assets/images/yangfang1.jpg')
      },
      {
        src: require('../../assets/images/yangfang.jpg')
      },
      {
        src: require('../../assets/images/yangfang2.jpg')
      },
      ],
      list3: [{
        src: require('../../assets/images/xiezilou.jpg')
      },
      {
        src: require('../../assets/images/xiezilou1.jpg')
      },
      {
        src: require('../../assets/images/xiezilou2.jpg')
      },
      ],
      list4: [{
        src: require('../../assets/images/gongyu.jpg')
      },
      {
        src:require('../../assets/images/gongyu1.jpg')
      },
      {
        src:require('../../assets/images/gongyu2.jpg')
      },
      ],
      list5: [{
        src:require('../../assets/images/shangpu.jpg')
      },
      {
        src:require('../../assets/images/shangpu1.jpg')
      },
      {
        src: require('../../assets/images/shangpu2.jpg')
      },
      ],
      list6: [{
        src: require('../../assets/images/gaocen.jpg')
      },
      {
        src: require('../../assets/images/gaocen1.jpg')
      },
      {
        src: require('../../assets/images/gaocen2.jpg')
      },
      ],
    }
  },
  methods: {
    handleClick(tab, event) {
    }
  }
}

</script>

<style lang="less" scoped>
#style {
  margin: 30px 0;
  height: 100%;
}
.el-tab-pane {
  padding: 50px;
}
.image {
  width: 100%;
  height: 300px;
  display: block;
}
.el-carousel__item:nth-child(2n) {
  background-image: url("../../assets/images/yangfang.jpg");
  background-position: center;
  background-repeat: no-repeat;
}
.el-carousel__item:nth-child(2n+1) {
  background-image: url("../../assets/images/homepage_bg.png");
  background-position: center;
}
</style>

